//参数监控
<template>
    <div class="container">
        <div v-for="(item,index) in menu_list" :key="index">
            <div v-on:click="changeContent(index)">
                <mt-cell :title="item.name" is-link>
                </mt-cell>
            </div>

            <div v-show="item.show" v-on:click="openPopup">
                <div v-for="(item,index) in item.detail" :key="index">
                    <mt-cell :title="item.name">
                        <p class="temp">{{item.temp}}</p>
                        <span >{{item.between}}</span>
                    </mt-cell>
                </div>

            </div>

        </div>
        <mt-popup v-model="popupVisible" class="popup">
            <mt-header>
                <router-link to="/" slot="left">
                    <mt-button icon="back" v-on:click="closeOpen">返回</mt-button>
                </router-link>
                <!--<mt-button icon="more" slot="right"></mt-button>-->
            </mt-header>
            <div class="pop-container">
                <div class="flex-2">
                    <div>
                        <p>80 kPa</p>
                        <p>±0 4%</p>
                    </div>
                    <div>
                        <p>最高 83</p>
                        <p>最低 76</p>
                    </div>
                    <div>
                        <p>平均 83</p>
                        <p>平均 76</p>

                    </div>
                    <div>
                        <p>超限评率 5</p>
                        <p>超限评率 75～82</p>
                    </div>

                </div>
            </div>
            <div class="pop-content">
                <div class="pop-content-header">
                    <mt-navbar v-model="selected" class="mt-tab-item">
                        <mt-tab-item id="1">分时</mt-tab-item>
                        <mt-tab-item id="2">日</mt-tab-item>
                        <mt-tab-item id="3">周</mt-tab-item>
                        <mt-tab-item id="4">月</mt-tab-item>
                        <mt-tab-item id="5">...</mt-tab-item>
                    </mt-navbar>
                </div>
                    <mt-tab-container v-model="selected">
                        <mt-tab-container-item id="1">
                            <div class="flex-tag">
                                <div>
                                    <i class="fa fa-bell" aria-hidden="true"></i>
                                    <i class="fa fa-heart" aria-hidden="true"></i>
                                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                                </div>
                            </div>

                            <div id="kOne" class="k-one">
                                123
                            </div>
                            <div class="pop-bottom">
                                <div class="flex-container">
                                    <div class="flex" v-for="(item,index) in msg" :key="index">
                                        <div>
                                            <p>{{item.time}}</p>
                                        </div>
                                        <div>
                                            <p>{{item.user_name}}</p>
                                        </div>
                                        <div>
                                            <p>{{item.msg}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-button">
                                    <div>
                                        <mt-button type="default">截图</mt-button>
                                    </div>
                                    <div>
                                        <mt-button type="default">批量录入及发送</mt-button>
                                    </div>

                                </div>


                            </div>

                        </mt-tab-container-item>
                        <mt-tab-container-item id="2">
                            <div id="kTwo" class="k-one">
                                123
                            </div>
                            <div class="pop-bottom">
                                <div class="flex-container">
                                    <div class="flex" v-for="(item,index) in msg" :key="index">
                                        <div>
                                            <p>{{item.time}}</p>
                                        </div>
                                        <div>
                                            <p>{{item.user_name}}</p>
                                        </div>
                                        <div>
                                            <p>{{item.msg}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-button">
                                    <div>
                                        <mt-button type="default">截图</mt-button>
                                    </div>
                                    <div>
                                        <mt-button type="default">批量录入及发送</mt-button>
                                    </div>

                                </div>


                            </div>
                        </mt-tab-container-item>
                        <mt-tab-container-item id="3">
                            <div id="kThree" class="k-one">
                                123
                            </div>
                            <div class="pop-bottom">
                                <div class="flex-container">
                                    <div class="flex" v-for="(item,index) in msg" :key="index">
                                        <div>
                                            <p>{{item.time}}</p>
                                        </div>
                                        <div>
                                            <p>{{item.user_name}}</p>
                                        </div>
                                        <div>
                                            <p>{{item.msg}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-button">
                                    <div>
                                        <mt-button type="default">截图</mt-button>
                                    </div>
                                    <div>
                                        <mt-button type="default">批量录入及发送</mt-button>
                                    </div>

                                </div>


                            </div>
                        </mt-tab-container-item>
                        <mt-tab-container-item id="4">
                            <div id="kFour" class="k-one">
                                123
                            </div>
                            <div class="pop-bottom">
                                <div class="flex-container">
                                    <div class="flex" v-for="(item,index) in msg" :key="index">
                                        <div>
                                            <p>{{item.time}}</p>
                                        </div>
                                        <div>
                                            <p>{{item.user_name}}</p>
                                        </div>
                                        <div>
                                            <p>{{item.msg}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-button">
                                    <div>
                                        <mt-button type="default">截图</mt-button>
                                    </div>
                                    <div>
                                        <mt-button type="default">批量录入及发送</mt-button>
                                    </div>

                                </div>


                            </div>
                        </mt-tab-container-item>
                        <mt-tab-container-item id="5">
                            <div id="kFive" class="k-one">
                                123
                            </div>
                            <div class="pop-bottom">
                                <div class="flex-container">
                                    <div class="flex" v-for="(item,index) in msg" :key="index">
                                        <div>
                                            <p>{{item.time}}</p>
                                        </div>
                                        <div>
                                            <p>{{item.user_name}}</p>
                                        </div>
                                        <div>
                                            <p>{{item.msg}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-button">
                                    <div>
                                        <mt-button type="default">截图</mt-button>
                                    </div>
                                    <div>
                                        <mt-button type="default">批量录入及发送</mt-button>
                                    </div>

                                </div>


                            </div>
                        </mt-tab-container-item>
                    </mt-tab-container>


            </div>
        </mt-popup>
        <div class="replace">

        </div>
    </div>
</template>

<script>
    import echarts from "echarts";

    export default {
        name: "firingParams",
        data() {
            return {
                flag: false,
                popupVisible: false,
                selected: '1',
                li_list_data: ['分时', '日', '周', '月', '...'],
                height_data: [80, 80, 80, 80, 80, 80, 80, 80, 80],
                low_data: [50, 50, 50, 50, 50, 50, 50, 50, 50],
                actual_data: [40, 50, 60, 70, 75, 76, 77, 55, 90],
                actual_data_k2: [40, 50, 60, 70, 75, 76, 77, 55, 90],
                height_data_k2: [80, 80, 80, 80, 80, 80, 80, 80, 80],
                low_data_k2: [50, 50, 50, 50, 50, 50, 50, 50, 50],
                data_x_k2: ['2018/01/02', '2018/01/03', '2018/01/04', '2018/01/05', '2018/01/06', '2018/01/07', '2018/01/08', '2018/01/09', '2018/01/10'],
                actual_data_k3: [40, 50, 60, 70, 75, 76, 77, 55, 90],
                height_data_k3: [80, 80, 80, 80, 80, 80, 80, 80, 80],
                low_data_k3: [50, 50, 50, 50, 50, 50, 50, 50, 50],
                data_x_k3: ['2018/01/02', '2018/01/03', '2018/01/04', '2018/01/05', '2018/01/06', '2018/01/07', '2018/01/08', '2018/01/09', '2018/01/10'],
                actual_data_k4: [40, 50, 60, 70, 75, 76, 77, 55, 90],
                height_data_k4: [80, 80, 80, 80, 80, 80, 80, 80, 80],
                low_data_k4: [50, 50, 50, 50, 50, 50, 50, 50, 50],
                data_x_k4: ['2018/01/02', '2018/01/03', '2018/01/04', '2018/01/05', '2018/01/06', '2018/01/07', '2018/01/08', '2018/01/09', '2018/01/10'],
                height_data_k5: [80, 80, 80, 80, 80, 80, 80, 80, 80],
                low_data_k5: [50, 50, 50, 50, 50, 50, 50, 50, 50],
                actual_data_k5: [40, 50, 60, 70, 75, 76, 77, 55, 90],
                data_x_k5: ['2018/01/02', '2018/01/03', '2018/01/04', '2018/01/05', '2018/01/06', '2018/01/07', '2018/01/08', '2018/01/09', '2018/01/10'],
                data_x: ['2018/01/02', '2018/01/03', '2018/01/04', '2018/01/05', '2018/01/06', '2018/01/07', '2018/01/08', '2018/01/09', '2018/01/10'],
                msg: [{
                    time: '19:00',
                    user_name: 'JHON',
                    msg: '白班注意休息时间，影响K1'
                },
                    {
                        time: '19:00',
                        user_name: 'JHON',
                        msg: '白班注意休息时间，影响K1'
                    },
                    {
                        time: '19:00',
                        user_name: 'JHON',
                        msg: '白班注意休息时间，影响K1'
                    }],
                menu_list: [
                    {
                        name: '加热控制',
                        detail: [{
                            name: '集气管温度',
                            temp: '150℃',
                            between: '120～200'
                        },
                            {
                                name: '集气管温度',
                                temp: '150℃',
                                between: '120～200'
                            },
                            {
                                name: '集气管温度',
                                temp: '150℃',
                                between: '120～200'
                            },
                            {
                                name: '集气管温度',
                                temp: '150℃',
                                between: '120～200'
                            },
                        ],
                        show: false
                    },
                    {
                        name: '烟气排放指标',
                        detail: [{
                            name: '集气管温度',
                            temp: '150℃',
                            between: '120～200'
                        },
                            {
                                name: '集气管温度',
                                temp: '150℃',
                                between: '120～200'
                            },
                            {
                                name: '集气管温度',
                                temp: '150℃',
                                between: '120～200'
                            },
                            {
                                name: '集气管温度',
                                temp: '150℃',
                                between: '120～200'
                            },
                        ],
                        show: false

                    }

                ]
            };

        },
        mounted() {

            this.$nextTick(() => {
                const myChart_k = this.myChart_k = echarts.init(document.getElementById("kOne"));
                const myChart_k2 = this.myChart_k = echarts.init(document.getElementById("kTwo"));
                const myChart_k3 = this.myChart_k = echarts.init(document.getElementById("kThree"));
                const myChart_k4 = this.myChart_k = echarts.init(document.getElementById("kFour"));
                const myChart_k5 = this.myChart_k = echarts.init(document.getElementById("kFive"));
                const option_k2 = {
                    title: {
                        text: 'K1',
                        left: 'center'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.data_x,
                        axisLabel: {
                            rotate: 50
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 10
                    }, {
                        start: 0,
                        end: 10,
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    series: [
                        {
                            name: '最高',
                            type: 'line',
                            stack: '总量',
                            data: this.height_data
                        },
                        {
                            name: '最低',
                            type: 'line',
                            stack: '总量',
                            data: this.low_data
                        },
                        {
                            name: '实际值',
                            type: 'line',
                            stack: '总量',
                            data: this.actual_data
                        }
                    ]
                }
                const option_k3 = {
                    title: {
                        text: 'K1',
                        left: 'center'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.data_x,
                        axisLabel: {
                            rotate: 50
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 10
                    }, {
                        start: 0,
                        end: 10,
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    series: [
                        {
                            name: '最高',
                            type: 'line',
                            stack: '总量',
                            data: this.height_data
                        },
                        {
                            name: '最低',
                            type: 'line',
                            stack: '总量',
                            data: this.low_data
                        },
                        {
                            name: '实际值',
                            type: 'line',
                            stack: '总量',
                            data: this.actual_data
                        }
                    ]
                }
                const option_k4 = {
                    title: {
                        text: 'K1',
                        left: 'center'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.data_x,
                        axisLabel: {
                            rotate: 50
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 10
                    }, {
                        start: 0,
                        end: 10,
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    series: [
                        {
                            name: '最高',
                            type: 'line',
                            stack: '总量',
                            data: this.height_data
                        },
                        {
                            name: '最低',
                            type: 'line',
                            stack: '总量',
                            data: this.low_data
                        },
                        {
                            name: '实际值',
                            type: 'line',
                            stack: '总量',
                            data: this.actual_data
                        }
                    ]
                }
                const option_k5 = {
                    title: {
                        text: 'K1',
                        left: 'center'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.data_x,
                        axisLabel: {
                            rotate: 50
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 10
                    }, {
                        start: 0,
                        end: 10,
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    series: [
                        {
                            name: '最高',
                            type: 'line',
                            stack: '总量',
                            data: this.height_data
                        },
                        {
                            name: '最低',
                            type: 'line',
                            stack: '总量',
                            data: this.low_data
                        },
                        {
                            name: '实际值',
                            type: 'line',
                            stack: '总量',
                            data: this.actual_data
                        }
                    ]
                }
                const option_k = {
                    title: {
                        text: 'K1',
                        left: 'center'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.data_x,
                        axisLabel: {
                            rotate: 50
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 10
                    }, {
                        start: 0,
                        end: 10,
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    series: [
                        {
                            name: '最高',
                            type: 'line',
                            stack: '总量',
                            data: this.height_data
                        },
                        {
                            name: '最低',
                            type: 'line',
                            stack: '总量',
                            data: this.low_data
                        },
                        {
                            name: '实际值',
                            type: 'line',
                            stack: '总量',
                            data: this.actual_data
                        }
                    ]

                };
                myChart_k.setOption(option_k);
                myChart_k2.setOption(option_k2);
                myChart_k3.setOption(option_k3);
                myChart_k4.setOption(option_k4);
                myChart_k5.setOption(option_k5);

            })
        },
        methods: {
            changeContent(index) {
                this.menu_list[index].show = !this.menu_list[index].show;
            },
            openPopup() {
                this.popupVisible = true;
                this.$nextTick(() => {
                    this.myChart_k.resize();
                })
            },
            closeOpen() {
                this.popupVisible = false;
            }
        }
    };
</script>

<style lang="scss">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .container {
        width: 100%;
    }

    .pop-content-header ul {
        overflow: hidden;
        list-style: none;
        border-bottom: 1px solid #b5edff;
    }

    .pop-content-header li {
        width: 20%;
        text-align: center;
        height: 30px;
        line-height: 30px;
    }

    .temp {
        /*background: green;*/
        padding: 5px;
        /*color: #fff*/

    }

    .active {
        text-decoration: underline;
        text-decoration-color: #000;
    }

    .pop-header {
        overflow: hidden;
        padding: 10px;
    }

    .flex-2 {
        display: flex;
        height: 60px;
        & > div {
            flex: 2;
            height: 30px;
            line-height: 30px;
        }
        div:nth-child(4) {
            flex: 4;
        }
    }

    .flex-container {
        height: 200px;
        /*background: #26a2ff;*/
        overflow: auto;
    }

    .flex {
        display: flex;
        padding-left: 10px;

        & > div {
            & > p {
                height: 30px;
                line-height: 30px;
            }
        }
        div:nth-child(1) {
            flex: 2;

        }
        div:nth-child(2) {
            flex: 2;
        }
        div:nth-child(3) {
            flex: 7;
        }
    }

    .pop-header p {
        height: 30px;
        line-height: 30px;
    }

    .k-one {
        position: relative;
        z-index: 2004;
        width: 100vw;
        height: 300px;
        margin: 0 auto;
    }

    .popup {
        width: 100%;
        height: 100%;
    }

    .mint-tab-item-label {
        font-size: 14px;
    }

    .flex-button {
        display: flex;
        padding: 20px;
        & > div {
            flex: 2;
        }
    }
    .replace{
        width: 100vw;
        height: 28px;
    }
    .flex-tag{
        display: flex;
        justify-content: flex-end;
    }

</style>
